<script setup>
import { onMounted, ref } from 'vue'
import { boardOpenOrCloseStore } from '@/stores'
const boardOpenOrCloseStore1 = boardOpenOrCloseStore()
const count = ref(3)
const startCountdown = () => {
  const timer = setInterval(() => {
    count.value--
    if (count.value === 0) {
      clearInterval(timer)
      //一秒后移除
      setTimeout(() => {
        boardOpenOrCloseStore1.changeCountDownBoard(false)
      }, 1000)
    }
  }, 1000)
}
onMounted(() => {
  startCountdown()
})
</script>
<template>
  <div class="final-page">
    <div class="final-box">
      <div v-if="count > 0">{{ count }}</div>
      <div v-else>Go!</div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.final-page {
  position: fixed;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  .final-box {
    height: 150px;
    padding: 20px;
    font-size: 100px;
    border-radius: 50%;
    color: rgb(77, 139, 77);
    background: url('./../../../assets/board.jpg') no-repeat center center;
    background-size: 100% 100%;
  }
}
</style>
